Añadir sidebar (Columna)

Quiero añadir que todas la explicaciones dadas en este blog previamente han sido puestas en práctica, es obvio que los resultados son los esperados de lo contrario no tendría sentido explicar algo que no va a resultar bien, pero no hay que olvidar que todas las plantilla no son iguales, por lo tanto guarden siempre una copia de su plantilla por lo que pudiera suceder y miren siempre en vista previa antes de guardar los cambios.
Dicho esto vamos a añadir una nueva sidebar al blog, lo vamos a hacer en una plantilla Minima de Douglas Bowman.

Nos situamos en Plantilla hasta encontrar Outer-Wrapper.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Necesitamos modificar el ancho de #outer-wrapper #main-wrapper y #sidebar-wrapper sin olvidar el espacio que debe quedar entre la nueva sidebar (columna) y el main (lugar de las entradas)
Lo modificaremos de la siguiente forma:
Primero vamos a aumentar el ancho del blog que está definido en #outer-wrapper aumentaremos el ancho que es width:660px; a width: 750px; de esta forma estamos aumentando el blog 90px;

Luego buscaremos #main-wrapper, el valor de width: 410px; lo modificaremos a width: 400px;
También agregaremos un margen para el espacio entre la sidebar y la columna central y lo haremos añadiendo margin-left: 20px;

En #sidebar-wrapper el cambio será de width: 220px; a width: 150 px;

Nos quedará más o menos así:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 400px;
margin-left: 20px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 150px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Ahora justo después de:

#sidebar-wrapper {
width: 150px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Añadimos el siguiente código:

#newsidebar-wrapper {
width: 150px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

Hay un detalle a tener en cuenta y es que float significa flotación, nos permite situar un elemento a izquierda o derecha.
Blogger, para establecer la ubicación añade $endSide para la derecha y $startSide para la izquierda, que podemos sustituirlo tranquilamente por left para izquierda y right para derecha.
Con esto lo que deseaba explicar es que podemos "mover" la segunda columna a nuestro antojo modificando la flotación y conseguir una sidebar en cada extremo, o las dos a un mismo lado.
float: left;
float: right;

Por último buscamos <div id='content-wrapper'> y a continuación añadimos :

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>







Nos vemos para personalizar la nueva sidebar ;)

Cuando hacemos un comentario es posible personalizar el comentario con una imagen, es como nuestra tarjeta de visita.
Agregar una imagen al perfil es muy sencillo, nos situamos en nuestro Escritorio de Blogger

Clicamos en Editar Perfil

Editar Perfil de usuario, buscaremos la opción para añadir una imagen y añadiremos la Url de la imagen, podemos conseguirla subiéndola a Blogger en una entrada o bien en ImageShack's
Luego guardamos los cambios realizados y listo.

Aunque ya tengamos una imagen añadida al perfil no siempre saldrá la imagen al dejar un comentario, dependerá que el blog visitado tenga esa función habilitada.
Para habilitar la opción de mostrar imágenes en los comentarios deberemos situarnos en nuestro
Panel de administración Opciones/Comentarios y a la pregunta de:
¿Mostrar imágenes de perfil en los comentarios? habilitar la casilla SI (Ver imagen de arriba)

Suerte Alaluna

Lo encontré en el blog de Rosa y pensaba comentarlo un día de estos, pero en vista del éxito que ha tenido aplicarlo a la sidebar del blog vamos a dar un poco más de información.
Se trata de una Web donde generan firmas online con 120 modelos de fuentes, yo diría fantasticas.
La aplicación depende de cada cual donde desee aplicarla, bien sea tipo imagen para añadir a las entradas, como en mi caso para personalizar la sidebar, también según he leído para añadir a nuestros e-mail.
El procedimiento es muy sencillo:

1ºIngresar a My Live Signature y clicar en Proceed.

2º De nuevo clicamos en Create Signature.

3º Luego debemos clicar en el primer enlace o si lo preferimos en la imagen de la barita mágica.

Escribimos en Name el texto o firma y clicamos en Next Step >

Lo demás es tan sencillo que asusta, solo debemos ir clicando para escoger modelo de fuente, color, tamaño, posición...

Cuando llegamos a Finished! The signature is ready quiere decir que nuestra firma ya está realizada, deberemos clicar en el último enlace que nos ofrece (Proporciona tres)

En Generating signature code nos proporciona el código HTML listo para aplicar a nuestra Web, para ello deberemos clicar en Generate HTML code

Una vez más debemos clicar, esta vez en el primer enlace que proporciona.

Por último tenemos ante nosotros la firma realizada, nos proporciona un código que con un copiar y pegar añadiremos a nuestro blog.

Si deseamos guardar nuestra firma en nuestro PC lo podemos hacer posando el ratón encima de la firma, botón derecho y escoger la opción de ´´guardar como`

Espero haber contestado a:

Paqui
JmpaSrgc
Sr.Patricio Aliaga

Y todo aquel que le pueda parecer interesante.

A veces echamos de menos la existencia de alguna herramienta o utilidad, imaginamos que sería ideal si lo que tenemos en mente pudiéramos tenerlo también a nuestro alcance, en contadas ocasiones llega un día que lo descubrimos y como es normal inmediatamente ponemos manos a la obra para ver si en realidad coincide tanto con nuestra idea. Eso es lo que me ha pasado. Siempre he pensado que debería haber una solución para este tema, que cuando dejáramos un comentario en algún blog recibiéramos aviso que hay respuesta al comentario.
Algo así como sucede en algunos foros, que recibimos un aviso en el mail para informar que nuestro intervención ha obtenido respuesta.
Creo que a todos nos pasa, comentar y por falta de tiempo pasan los días hasta tener la posibilidad de ver si obtuvimos respuesta a nuestro comentario, si el lugar donde dejamos el comentario se actualiza con frecuencia el trabajo es doble, hay que buscar el lugar exacto donde lo dejamos.
Cocomment no manda aviso a nuestro mail, hace un seguimiento en un mismo lugar para que no se pierda ninguna de las contribuciones que hicimos en otras Webs.

Nos informa cuando alguien responde a un comentario, convirtiendo la Web en una verdadera conversación global.
coComment muestra todas las conversaciones que está siguiendo en un mismo lugar, funciona como un buzón de correo electrónico.
Si lo encuentras útil a qué estamos esperando? Ingresamos en coComment y nos registramos.

Lo primero de todo una vez registrados será añadir una extensión si usamos Firefox, o un marcador si se usa otro navegador.

Instalar extensión (usuarios de Firefox)

http://www.cocomment.com/tools/extension

Demo para instalar el marcador
(una vez instalado tendrá que clicar en el marcador antes de cada comentario)

http://www.cocomment.com/tools/bookmarklet

Una vez instalada la extensión o añadido el marcador podemos hacer una prueba, consiste en dejar un comentario en lo que llaman clob de pruebas de coComment.

http://cocotest.wordpress.com/

Antes de pasar a ver los resultados de la prueba nos recomiendan completar nuestro perfil y alguna información añadida ofreciéndonos la posibilidad de incluir una imagen desde nuestro PC.

Quiero recordar que si no deseamos que nuestros comentarios aparezcan en en los rankings de usuario, listado etc deberemos inhabilitar la casilla para Opciones de privacidad que por defecto viene activada.

Cuando ya tenemos instalada la extensión junto a nuestra barra del navegador nos saldrá un icono como este cuando deseamos saber si algún comentario dejado por nosotros ha obtenido respuesta solo debemos clicar sobre él.

Como veis en la imagen de arriba nos sitúa en nuestro panel de Cocomment donde podremos visionar el tráfico originado a partir de dejar un comentario.

Existe una herramienta muy atractiva para visionar los últimos comentarios, un top con los usuarios más activos en nuestro blog o una nube de tags, la primera opción la podemos aplicar los usuarios de Blogger las otras dos que son las que me gustan solo están disponibles para WordPress.

Y eso es todo, hay mucho para informarse y para entretenerse pero eso lo dejo a vuestra elección...

A Mactrucos le está gustando esto de jugar con códigos :)
Ha tenido la idea de aplicar una imagen en el buscador interno del blog, me lo explica detalladamente en un mail y con su permiso voy a compartirlo.
Nos situamos en plantilla de diseño y añadimos un elemento de página HTML/Javascript donde incluimos el siguiente código:

<form action="http://search.blogger.com/" name="b-search">
<input id="b-query" placeholder="Busca lo que no veas" name="as_q" type="text"/>
<input value="UTF-8" name="ie" type="hidden"/>
<input value="blg" name="ui" type="hidden"/>
<input value="url-de-tu-blog-sin-http://" name="bl_url" type="hidden"/>
<input id="b-searchbtn" alt="Search This Blog" value="go" title="go "
onclick="document.forms['b-search'].bl_url.value=''url-de-tu-blog-sin-http://"
type="submit"/>
</form>

Si quieres cambiar el botón por una imagen que haga la función del 'go' elimina lo siguiente:

<input id="b-searchbtn" alt="Search This Blog" value="go" title="go "
onclick="document.forms['b-search'].bl_url.value='url-de-tu-blog-sin-http'"
type="submit"/>
</form>

Y en su lugar añades:

<input border="0" alt="Buscar" src="Url-de-la-imagen" type="image"/>
</form>

Podemos seguir personalizando el buscador y esta vez soy yo la que va a meter un poquito de mano en el código, lo haremos añadiendo un color de fondo, un borde incluso si lo deseamos podemos añadir una imagen.
Para ello buscamos el código de nuestro buscador y donde dice:

<input value="url-de-tu-blog-sin-http://" class="b-query" name="bl_url" type="hidden"/>

Y añadiremos lo que aparece en negrita.

Guardamos los cambios y nos dirigimos a la plantilla edición HTML, localizamos ]]></b:skin> y justo antes agregamos lo siguiente:

/* Buscador personalizado */

#b-query{
background:#B22222;
background-image:url('url-de-la-imagen');
background-repeat:no-repeat;
border: 2px solid#ffffff;
font-size: small;
color: #ffffff;
}

/* Buscador personalizado */

Este código es el lugar donde podemos hacer cualquier cambio a la caja del buscador.
background:color de fondo
background-image: para añadir una imagen de fondo.
background-repeat:no-repeat; si deseamos que la imagen se repita lo suprimimos.
border: tipo color y grosor del borde
font-size:tipo de letra.
color: color de la letra.




Una cosa importante... para que el buscador sea efectivo el código debe agregarse correctamente, si os fijáis bien debemos añadir la dirección Url de nuestro blog pero omitiendo el http, es decir si mi blog es " http://www.gemablog-.blogspot.com/ " habría que poner gemablog-.blogspot.com/

Hay ocasiones que debido a circunstancias ajenas perdemos una entrada del blog, el bloqueo de una página, la caída del navegador, incluso que cerremos la página que estamos editando sin darnos cuenta.
Blogger dispone de una pequeña funcionalidad para remediar ese problema, según Blogger mientras escribimos una entrada el texto se almacena en una cookie de nuestro navegador, de esta forma si por lo que fuera perdemos esa entrada solo debemos volver a ella y buscar el vínculo Recuperar entrada.

No garantizan recuperar todas las entradas perdidas, hay que tener en cuenta acceder al mismo blog donde perdimos la entrada, con el mismo navegador y durante los primeros 30 minutos tras perder la entrada.
Sólo pueden recuperarse 3.000 palabras de texto, de modo que las partes de entradas más extensas se perderán.
Y algo muy importante: No escribir nada en el formulario de entrada antes de intentar recuperar el texto, ya que ello podría sobrescribir la cookie antigua.
Todo esto es algo que desconocía, y a pesar de no ser fiable 100%100 vale la pena intentarlo antes de perder una entrada.

Este menú desplegable que traigo es muy vistoso para el blog, tiene una particularidad y es que podemos añadir nosotros mismos los botones de acuerdo a nuestros gustos o el color acorde con nuestro blog.
En El blog de Cesar he encontrado uno igual que a su vez lo hizo con Aire como referencia.
La imagen que ilustra esta entrada es solo para que veáis el diseño. En la sidebar encontraréis el menú, os invito a probar para que veáis el efecto al clicar en él.
Podemos aplicarlo en unos sencillos pasos:

Lo primero que haremos será situarnos en Plantilla/Edición HTML y justo después de <head> añadiremos lo siguiente:

<style type="text/css">.texthidden {display:inline}.shown {display:block}</style><script type="text/javascript">document.write('<style>.texthidden {display:none} </style>');</script><script type="text/Javascript">function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>

Después nos situamos en Plantilla/Añadir un elemento de página/HTML/Javascript y añadimos el código.
Os lo dejo tal y como lo tengo en mi sidebar omitiendo algunos enlaces para ahorraros el trabajo de eliminarlos.

<a href="javascript:void(0);" onclick="expandcollapse('Actualidad')">
<img border="0" src=" http://img183.imageshack.us/img183/6739/actualidadan5.gif"/>
</a><br/>

<ul id="Actualidad" class="texthidden">
<li><a href="http://www.20minutos.es/ " target="_blank"> 20 Minutos
</a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('Traductor')">
<img border="0"src="http://img186.imageshack.us/img186/4555/traductorhp5.gif"/>
</a><br/>

<ul id="Traductor" class="texthidden">
<li><a href="http://www.elmundo.es/traductor/" target="_blank"> El Mundo </a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('Enciclopedia')">
<img border="0" src="http://img186.imageshack.us/img186/9757/encicoplediabq3.gif"/>
</a><br/>

<ul id="Enciclopedia" class="texthidden">
<li><a href="http://es.wikipedia.org/wiki/Portada" target="_blank"> Wikipedia </a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('Conversor')">
<img border="0" src="http://img340.imageshack.us/img340/3786/conversorzi5.gif"/>
</a><br/>

<ul id="Conversor" class="texthidden">
<li><a href="http://chuano.net/chuano/util/convsimbolos.php" target="_blank"> Conversor HTML </a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('Ayuda blog')">
<img border="0" src="http://img208.imageshack.us/img208/940/buttonoq4.gif"/>
</a><br/>

<ul id="Ayuda blog" class="texthidden">
<li><a = _blank href="http://www.gemablog-.blogspot.com/">Gem@ BLOG </a></li></ul>

Vamos a conocer un poco el código.

Color rojo: El texto que habremos añadido al botón.

Color verde: Dirección Url de la imagen del botón.

Color naranja: Texto que aparece al desplegarse el botón.
Color azul: Dirección Url del enlace de la página enlazada.
(Lo que aparece en negro no lo modificaremos)

Es fácil crear unos botones, una página muy sencilla es http://www.buttonator.com/

Al igual que Cesar yo lo personalicé con una imagen chiquita que aparece en forma de flecha si os gusta podéis añadir una imagen añadiendo el código de imagen

<img src="aquí-la-url-de-tu-imagen"> justo antes del texto que aparece al desplegarse el botón (color naranja)
Y eso es todo, si tienes dudas házmelo saber

(Esto es una captura de imagen, no hace la función de buscar pero así es como queda el menu9)

Anteriormente aplicamos las categorías en forma de pestaña horizontal, hoy vamos a aplicarlas de la misma forma pero en vertical, los pasos a seguir son los siguientes:
Una vez tengamos los post etiquetados nos dirigimos a:
Plantilla/Edicion de Html/Expandir plantillas de artilugios.

Buscamos esta línea de código:
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">

Y la sustituimos por esta:
<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">

Luego buscamos:
]]></b:skin> y justo antes añadiremos el siguiente código:

*- Menu 9--------------------------- */

#menu9 {
width: 200px;
margin: 10px;
}

#menu9 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu9 li a:link, #menu9 li a:visited {
color: #FFF;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu9.gif);
padding: 8px 0 0 35px;
}

#menu9 li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu9.gif) 0 -32px;
padding: 8px 0 0 35px;
}

Por último nos situaremos en esta parte de código:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title><h2>
<b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Y reemplazaremos la anterior de color azul por esta:

<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>

Para los que ya tienen aplicadas las categorías en forma de pestaña horizontal y desean cambiar a la vertical solo deben modificar la parte de las etiquetas es decir sustituir desde /*- Menu Tabs F */ hasta #tabsF a:hover span { por el código de la etiqueta a poner según modelo.
Luego buscar la parte del código en rojo que sustituimos por el azul y donde dice:
<div id='tabsF'> sustituimos tabsF por menu9 o el que añadimos.

En csspicstock.blogspot.com podéis ver diferentes diseños y colores de las etiquetas y el código para cada una de ellas.

Grsites es la mayor página de fondos para blog que he visto, los podéis encontrar en diferentes categorías, naturaleza, metal, computadoras, música, papel ect... más de mil fondos, si, habéis leído bien MIL fondos.
Sobre texturas más de lo mismo, escogiendo un color nos proporciona un sin fin de fondos con la particularidad que ese mismo fondo podemos adecuarlo al color que nos guste.
Y hay más, también nos proporciona fondos con borde, es decir esos fondos con una imagen a la izquierda del blog y el resto en un solo color.
Y botones, no falta el generador de botones, de logos, de menús, y bueno será mejor una visita, no sin antes agradecer a Junio la información, sin la cual no tendríamos conocimiento de esta página, al menos yo.
¿Cómo añadir una imagen de fondo?

Lo que muchos buscaban, conseguir la Url de nuestros archivos Mp3 de forma rápida y sencilla, con Ijigg y la sencillez de su manejo ya es posible.

Lo he visto publicado por el El Cowboy en HBH se trata de Meesz una página donde podemos crear una imagen animada tridimensional, los resultados dependen mucho del tiempo que le dediquemos y la fantasía de cada uno.
El Cowboy nos recuerda que algunas opciones son de pago como la narices más sofisticadas o algunas prendas de ropa, pero con las opciones gratuitas es más que suficiente.
El registro es fácil y rápido, una vez registrados y terminada nuestra obra de arte nos ofrece un código para añadir a nuestra página, o si lo preferimos descargar la animación directamente a nuestro PC.

Ofrece también la posibilidad de obtener el código en varios tamaños lo que facilita la labor a la hora de editar nuestra animación dependiendo el lugar donde vamos a insertarla.
Aunque por lo que he comprobado pierde la animación al reducir de tamaño.

Gracias a JmpaSrgc que por cierto es todo un maestro en modificar el diseño de plantillas vamos a cambiar la sidebar del blog con sus explicaciones.
La sidebar que vamos a cambiar de lugar está en el lado derecho, el objetivo es situarla al lado izquierdo.

Nos situamos en:
/* Outer-Wrapper ----------------------------------------------- */

Buscaremos lo siguiente:

En #main-wrapper {
Cambiaremos float:left; por float:right;

En #sidebar-wrapper {
Cambiaremos float:right; por float:left;

Si deseamos cambiar la sidebar de izquierda a derecha obviamente el cambio a realizar sería al contrario.

Un consejo... No guarden los cambios nunca sin mirar en vista previa y aún así guarden siempre una copia de la plantilla

¡Suerte¡

En algunas páginas personales vemos un efecto que llama mucho la atención, es una imagen de fondo estática, da la sensación que las entradas del blog van ascendiendo y el fondo queda fijo.
¿Cómo conseguirlo?
Nos situamos en:

body {
background:#ffffff;

Lo primero que vamos a hacer es aplicar la imagen de fondo, #ffffff; es el color de fondo mi blog, en vuestro caso puede ser un color distinto, vamos a sustituirlo por una imagen y lo vamos a hacer sustituyendo #ffffff; por: url('aquí la url de tu imagen de fondo');

De manera que quedaría así:
body {
background:url('aquí la url de tu imagen de fondo');

Ya tenemos una imagen de fondo y ahora vamos a hacer que dicha imagen quede estática, para ello aplicamos background-attachment: fixed; después de la imagen de fondo.

Si la imagen es pequeña lo más probable es que se repita, deberemos añadir el atributo no-repeat; para que esto no suceda.
background-repeat: no-repeat;

Una vez terminado quedaría más o menos así:
body {
background:url('aquí tu imagen de fondo');
background-attachment: fixed;
background-repeat: no-repeat;


(Suerte David, que el trabajo de la Uni salga estupendo)

En repetidas ocasiones me han preguntado que es un feed, y de qué forma funcionan los agregadores de noticias.
No soy una entendida en la materia, y aunque en varias ocasiones he dado mi versión, me queda la duda de haberme expresado bien.

En Blogissimo he encontrado esta información que espero sea útil.

RSS es un formato desarrollado específicamente para todo tipo de sitios que se actualicen con frecuencia y por medio del cual se puede compartir la información y usarla en otros sitios web o programas. A esto se le conoce como sindicación.

Un feed es una fuente de RSS, es decir; un conjunto de información dispuesta para que un lector de feeds o agregador pueda leer esta información.

Suscribirse sería añadir una fuente de RSS (o Feed) a tu programa o lector favorito para, de esta forma, disponer de la información, por ejemplo de este blog, en el momento en que tú quieras.


Una vez aclaradas las dudas o eso espero, he pensado en ampliar un poco más la información para que tengáis vuestro agregador de noticias si así lo veis conveniente. Podéis encontrar muchísimos, os dejo aquí el que utilizo www.bloglines.com solo tenéis que clicar y seguir los pasos.
Si quedan dudas Guillermo Carvajal ofrece en su blog la brújula verde un tutorial con lujo de detalles, a esto le llamo yo trabajo bien realizado ;)

¡Suerte en todo¡

A veces me da la sensación cuando escribo un post que ya lo hice anteriormente, me refiero sobre un tema en concreto, ocurre como el código que viene a continuación para enlaces en expandible, pero no, lo he buscado y no lo encuentro, así que a petición de Paqui vamos a ver como se hace.
Copiamos el código y lo añadimos a la sidebar en este orden:
Plantilla/Añadir un elemento de página/HTML/Javascript
Una vez añadido sustituimos lo que aparece en color verde por la Url de las páginas que deseamos añadir.
Donde aparece azul añadiremos el texto que más tarde será visible en la sidebar.
El color rojo no lo modificaremos.
Clica en Seguir Leyendo para copiar el código.

<select onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" class="combobox" name="SiteMap" size="1">
<option selected/>aquí-el-título

<option value="aquí-la-url-de-la-página" target="_blank"/>aquí-texto-visible
<option value="aquí-la-url-de-la-página" target="_blank"/>aquí-texto-visible
<option value="aquí-la-url-de-la-página" target="_blank"/>aquí-texto-visible
<option value="aquí-la-url-de-la-página" target="_blank"/>aquí-texto-visible
<option value="aquí-la-url-de-la-página" target="_blank"/>aquí-texto-visible
</select>

El otro día me preguntaban como añadir color de fondo a las entradas, ya lo habíamos aplicado en las CSS en una plantilla clásica de Blogger, pero el problema era que al aplicarlo en la plantilla todas las entradas aparecían del mismo color.

Así que vamos a hacerlo de manera que escogemos las entradas que tendrán color y también podremos cambiar varias veces en una misma entrada.

Es lo más sencillo del mundo, se trata de añadir una tabla de color, para ello utilizamos el código siguiente:

<table bgcolor="#E0FFCC"><tbody><tr><td>aqui el texto</td></tr></tbody></table>

Cambiaremos #E0FFCC por el color escogido

¿Te preguntabas que pasa con las imágenes? No hay problema en añadirlas, basta agregar el código que nos propociona Blogger cuando alojamos una imagen en el espacio que antes utilizamos para escribir entre <td> y </td>

Aquí tenéis una tabla de colores estupenda donde clicando en un color os genera multitud de tonalidades de dicho color. www.december

Y eso es todo ;)

!Suerte¡

Aquí estamos probando accesorios en Glitter-Graphics una página descubierta por nuestra amiga Rosa que con entusiasmo la comparte con todos.
Si la visitáis podéis encontrar Gif animados, blinkies, fondos, generadores de texto, avatars, y dividers, una gran selección de 205 dividers, algunos de ellos van a sumarse a la categoría de dividers de este blog.
Espero que lo paséis entretenido